<script setup lang="ts">

</script>

<template>
  <div
      class="flex items-center p-3 mb-3 leading-6 text-black bg-white rounded-lg border border-gray-200 border-solid"
  >
    <div
        class="flex justify-center items-center w-10 h-10 text-black bg-blue-100 rounded-lg"
        style="margin-inline-end: 0.75rem;"
    >
      <svg
          class="block w-5 h-5 text-blue-700 align-middle lg:h-6 lg:w-6"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
          viewBox="0 0 24 24"
      >
        <path
            fill-rule="evenodd"
            d="M9 2.221V7H4.221a2 2 0 0 1 .365-.5L8.5 2.586A2 2 0 0 1 9 2.22ZM11 2v5a2 2 0 0 1-2 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2 2 2 0 0 0 2 2h12a2 2 0 0 0 2-2 2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2V4a2 2 0 0 0-2-2h-7Zm-6 9a1 1 0 0 0-1 1v5a1 1 0 1 0 2 0v-1h.5a2.5 2.5 0 0 0 0-5H5Zm1.5 3H6v-1h.5a.5.5 0 0 1 0 1Zm4.5-3a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h1.376A2.626 2.626 0 0 0 15 15.375v-1.75A2.626 2.626 0 0 0 12.375 11H11Zm1 5v-3h.375a.626.626 0 0 1 .625.626v1.748a.625.625 0 0 1-.626.626H12Zm5-5a1 1 0 0 0-1 1v5a1 1 0 1 0 2 0v-1h1a1 1 0 1 0 0-2h-1v-1h1a1 1 0 1 0 0-2h-2Z"
            clip-rule="evenodd"
            class=""
        ></path>
      </svg>
    </div>
    <div class="text-black" style="margin-inline-end: 1rem;">
      <p class="m-0 text-sm font-semibold leading-5 text-gray-900">
        flowbite_offer_345
      </p>
      <p class="m-0 text-sm leading-5 text-gray-500">PDF, 2.3 MB</p>
    </div>
    <div class="flex items-center text-black" style="margin-inline-end: auto;">
      <button
          type="button"
          data-tooltip-target="tooltip-download"
          class="p-1 m-0 text-center text-gray-500 normal-case bg-transparent bg-none rounded-lg cursor-pointer"
          style="font-size: 128%;"
      >
        <svg
            class="block w-5 h-5 align-middle"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            fill="currentColor"
            viewBox="0 0 24 24"
        >
          <path
              fill-rule="evenodd"
              d="M13 11.15V4a1 1 0 1 0-2 0v7.15L8.78 8.374a1 1 0 1 0-1.56 1.25l4 5a1 1 0 0 0 1.56 0l4-5a1 1 0 1 0-1.56-1.25L13 11.15Z"
              clip-rule="evenodd"
              class=""
          ></path>
          <path
              fill-rule="evenodd"
              d="M9.657 15.874 7.358 13H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-2.358l-2.3 2.874a3 3 0 0 1-4.685 0ZM17 16a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H17Z"
              clip-rule="evenodd"
              class=""
          ></path>
        </svg>
        <span class="border-gray-200 border-solid sr-only">Download</span>
      </button>
      <div
          id="tooltip-download"
          role="tooltip"
          class="inline-block absolute invisible z-10 py-2 px-3 m-0 text-sm font-medium leading-5 text-white bg-gray-900 rounded-lg opacity-0 duration-300 ease-in-out"
          style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate(231px, -2052px); box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; transition-property: opacity;"
          data-popper-placement="top"
      >
        Download file
        <div
            class="absolute left-0 h-2"
            data-popper-arrow=""
            style='position: absolute; left: 0px; transform: translate(54px, 0px); width: 9px; content: ""; bottom: -4px;'
        ></div>
      </div>
      <button
          type="button"
          data-tooltip-target="tooltip-report"
          class="p-1 m-0 text-center text-gray-500 normal-case bg-transparent bg-none rounded-lg cursor-pointer"
          style="font-size: 128%;"
      >
        <svg
            class="block w-5 h-5 align-middle"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            fill="currentColor"
            viewBox="0 0 24 24"
        >
          <path
              d="M13.09 3.294c1.924.95 3.422 1.69 5.472.692a1 1 0 0 1 1.438.9v9.54a1 1 0 0 1-.562.9c-2.981 1.45-5.382.24-7.25-.701a38.739 38.739 0 0 0-.622-.31c-1.033-.497-1.887-.812-2.756-.77-.76.036-1.672.357-2.81 1.396V21a1 1 0 1 1-2 0V4.971a1 1 0 0 1 .297-.71c1.522-1.506 2.967-2.185 4.417-2.255 1.407-.068 2.653.453 3.72.967.225.108.443.216.655.32Z"
              class=""
          ></path>
        </svg>
        <span class="border-gray-200 border-solid sr-only">Report</span>
      </button>
      <div
          id="tooltip-report"
          role="tooltip"
          class="inline-block absolute invisible z-10 py-2 px-3 m-0 text-sm font-medium leading-5 text-white bg-gray-900 rounded-lg opacity-0 duration-300 ease-in-out"
          data-popper-placement="top"
          style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate(260px, -2052px); box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; transition-property: opacity;"
      >
        Report this file
        <div
            class="absolute left-0 h-2"
            data-popper-arrow=""
            style='position: absolute; left: 0px; transform: translate(57px, 0px); width: 9px; content: ""; bottom: -4px;'
        ></div>
      </div>
    </div>
  </div>

</template>

<style scoped>

</style>